<template>
  <div>
    <!--  新增 批量删除  批量导出  批量修改备注-->
    <el-row :gutter="10"  style="margin-left: 40px;margin-bottom: 10px" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDeleteAll"
        >批量删除</el-button>
      </el-col>
    </el-row>
    <!--  遍历表单-->
    <el-table  :data="lists.list"  :row-class-name="tableRowClassName" @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="55" align="center"  />
      <el-table-column type="index" :index="indexMethod"  width="80" align="center"  label="序号" />
      <el-table-column label="陪玩时长" align="center" prop="playTime" width="200":show-overflow-tooltip='true'/>
      <el-table-column label="陪玩费用" align="center" prop="playCost"  :show-overflow-tooltip='true' />
      <el-table-column label="操作" align="center"  width="240" >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="editor(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="margin-left: 570px" class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="lists.pageNum"
        :page-sizes="[10,20,30,40,50,60,100,200,300]"
        :page-size="lists.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="lists.totalRows">
      </el-pagination>
    </div>

    <!--      修改游戏名-->
    <el-dialog :before-close="handleClose1" :title="diaLogName" :visible.sync="open" style="text-align: center"  >
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">

          <el-col :span="20">
            <el-form-item label="陪玩时长" prop="playTime">
              <el-input v-model="formData.playTime" placeholder="请输入陪玩时长" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="20">
            <el-form-item label="陪玩费用" prop="playCost">
              <el-input v-model="formData.playCost" placeholder="请输入陪玩费用" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>

        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {getList,addPlay,updatePlay,deletePlay,deletePlayAll} from  '@/api/plays';
  export default {
    name: 'playd',
    data(){
      const moneyValidator = (rule, value, callback)=>{
        if(value === '' || typeof(value) == 'undefined') {
          callback(new Error('请输入金额'));
        } else if(!(/^0\.([1-9]|\d[1-9])$|^[1-9]\d{0,8}\.\d{1,2}$|^[1-9]\d{0,8}$/.test(value))) {
          callback(new Error('请输入正确的金额'));
        } else if(value <= 0) {
          callback(new Error('请输入正确的金额'));
        } else {
          callback();
        }
      };
      return{
        lists:{
          totalRows:0,    //总记录数
          totalPages:0,   //总页数
          pageNum:1,      //当前第几页
          pageSize:10,     //每页记录数
          curPageSize:0,  //当前页记录数
          list: null,
        },
        multiple: true,
        open:false,
        formData: {playTime: '',playCost:'',playId:''},
        rules: {
          playTime: [{required: true, message: '请输入陪玩时长', trigger: 'blur'}],
          playCost: [{required: true, validator: moneyValidator, trigger: 'blur'}],
        },
        diaLogName:'',
        all:[]
      }
    },
    created() {
      this.getList()
    },
    methods:{

      indexMethod(index) {
        return index+1;
      },

      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },

      //获取批量
      handleSelectionChange(val) {
        this.multiple = !val.length
        this.all = []
        for(let i=0; i<val.length;i++){
          this.all.push(val[i].playId)
        }
        console.log(this.all)
      },

      getList(){
        getList(this.lists.pageNum,this.lists.pageSize)
          .then(res=>{
            this.lists =res.data.data
          })
      },

      //每页的大小
      handleSizeChange(val) {
        this.lists.pageSize = val
        this.getList()
      },
      //当前页是第几页
      handleCurrentChange(val) {
        this.lists.pageNum = val
        this.getList()
      },

      //单个编辑
      editor(x,y){
        this.diaLogName = "修改陪玩"
        this.open = true
        this.formData = y
      },

      handleClose1(){
        this.open =false
        this.getList()
      },

      //修改游戏
      handelConfirm(){
        this.$refs['elForm'].validate(valid => {
          if (valid){
            if(!this.formData.playId){
              addPlay(this.formData.playTime,this.formData.playCost)
                .then(res=>{
                  this.$message("增加成功")
                  this.getList()
                })
            }
            if(this.formData.playId) {
              updatePlay(this.formData)
                .then(res => {
                  this.$message("修改成功")
                  this.getList()
                })
            }
            this.open =false;
          }
        })

      },

      close(){
        this.open =false
        this.getList()
      },

      //单个删除
      handleDelete(x,y){
        this.$confirm('是否确认删除 ' + y.playTime + ' 的数据?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(res=>{
          deletePlay(y.playId)
            .then(res=>{
              this.$message('删除成功')
              this.getList()
            })
        })
      },

      //批量删除游戏
      handleDeleteAll(){
        this.$confirm('确定批量删除这些数据吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(res=>{
          deletePlayAll(this.all)
            .then(res=>{
              this.$message('删除成功')
              this.getList()
            })
        })
      },


      //新增游戏
      handAdd(){
        this.diaLogName = "新增陪玩"
        this.open = true
        this.formData ={}
      }

    }
  }
</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
